<!-- AddPropertyForm.vue -->
<template>
  <el-form
    ref="form"
    :model="formData"
    :rules="rules"
    label-width="120px"
    @submit.prevent="submit"
  >
    <el-form-item label="模型" prop="model">
      <el-input v-model="formData.model" :readonly="readonlyFields.model" />
    </el-form-item>
    <el-form-item label="属性" prop="property">
      <el-input
        v-model="formData.property"
        :readonly="readonlyFields.property"
      />
    </el-form-item>
    <el-form-item label="显示名称" prop="displayName">
      <el-input v-model="formData.displayName" />
    </el-form-item>
    <el-form-item label="数据类型" prop="dataType">
      <el-select v-model="formData.dataType" placeholder="请选择数据类型">
        <el-option label="字符串" value="string" />
        <el-option label="数字" value="number" />
        <el-option label="枚举" value="enum" />
        <el-option label="布尔" value="boolean" />
      </el-select>
    </el-form-item>
    <el-form-item label="最大值" prop="max">
      <el-input-number v-model="formData.max" controls-position="right" />
    </el-form-item>
    <el-form-item label="最小值" prop="min">
      <el-input-number v-model="formData.min" controls-position="right" />
    </el-form-item>
    <el-form-item label="精度" prop="precision">
      <el-input-number v-model="formData.precision" controls-position="right" />
    </el-form-item>
    <el-form-item label="单位" prop="unit">
      <el-input v-model="formData.unit" />
    </el-form-item>
    <el-form-item label="默认值" prop="defaultValue">
      <el-input v-model="formData.defaultValue" />
    </el-form-item>
    <el-form-item label="枚举值" prop="enumValues">
      <el-input v-model="formData.enumValues" />
    </el-form-item>
    <el-form-item label="必需" prop="required">
      <el-switch v-model="formData.required" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button @click="$emit('AddPropertyForm_close')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import { DeviceProperty } from "@/api/deviceApi";

export default defineComponent({
  props: {
    property: {
      type: Object as () => DeviceProperty,
      default: null
    }
  },
  setup(props, { emit }) {
    const formData = ref<Partial<DeviceProperty>>({});
    const readonlyFields = ref({
      model: false,
      property: false
    });

    // Update form values when the property prop changes
    watch(
      () => props.property,
      newValue => {
        if (newValue) {
          formData.value = { ...newValue };
          readonlyFields.value = {
            model: true,
            property: true
          };
        } else {
          formData.value = {};
          readonlyFields.value = {
            model: false,
            property: false
          };
        }
      },
      { immediate: true }
    );

    const rules = {
      model: [{ required: true, message: "请输入模型名称", trigger: "blur" }],
      property: [
        { required: true, message: "请输入属性名称", trigger: "blur" }
      ],
      displayName: [
        { required: true, message: "请输入显示名称", trigger: "blur" }
      ],
      dataType: [
        { required: true, message: "请选择数据类型", trigger: "change" }
      ]
      // ... other rules for DeviceProperty fields ...
    };

    const submit = () => {
      emit("submit", formData.value);
      formData.value = {};
    };

    return {
      formData,
      readonlyFields,
      rules,
      submit
    };
  }
});
</script>
